<template>
  <view class="container box-sizing padding-lr">
    <!-- 轮播 -->
    <swiper class="swiper flex" circular :autoplay="true" :interval="3000" :duration="1000" :current="swiperCurrent" @change="changeSwiper">
      <swiper-item v-for="item in list" :key="item.id">
        <navigator hover-class="none" class="round">
          <img class="swiper-item radius-lg" :src="item.pic" style="height: 240rpx;"></img>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 轮播指示点样式修改 -->
    <view class="dots">
      <block v-for="(item,index) in list.length" :key="item">
        <view class="dot round" :class="index==swiperCurrent ? ' active' : ''"></view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      swiperCurrent: 0,
    }
  },
  props: {
    list: {
      type: Array,
      value: []
    }
  },
  methods: {
    changeSwiper(e) {
      this.swiperCurrent = e.detail.current;
    }
  },

}
</script>

<style lang="scss">
.container {
  width:750rpx;
  height:240rpx;
  position: relative;
  .swiper {
    width: 100%;
    height: 240rpx;
    overflow: hidden;
    position: relative;
    .swiper-item {
      width: 100%;
      /*height: 360rpx;*/

      image:{
        width:100%;
      }
    }
  }
  .dots {
    position: absolute;
    bottom: 20rpx;
    left: 50%;
    // 这里一定要注意兼容不然很可能踩坑
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    z-index: 99;
    display: flex;
    flex-direction: row;
    justify-content: center;
    .dot {
      width: 16rpx;
      height: 16rpx;
      transition: all .6s;
      background: rgba(0, 0, 0, .3);
      margin-right: 10rpx;
    }
    .active {
      width: 16rpx;
      height: 16rpx;
      background: rgba(255, 255, 255, .8);
    }
  }
}

</style>
